<template>
  <div>
    <!-- 创建容器,使用百度地图API -->
    <div id="bdMap"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      map:null,
      id:'1',
      longitude:39.925, 
      latitude:116.404,
      hname:"钟楼大酒店"
    }
  },
  methods: {
    myMap() {
      let long=this.longitude
      let lat=this.latitude
      let hname=this.hname
      // console.log(hname)
      this.map = new BMapGL.Map("bdMap");
      var point=new BMapGL.Point(lat,long)
      this.map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩
      var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
      this.map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
      this.map.addControl(zoomCtrl);
      //添加标记点
      var marker = new BMapGL.Marker(point);
      this.map.addOverlay(marker);
      //创建信息窗口
      var opts = {
          width: 30,
          height: 30
      };
      var infoWindow = new BMapGL.InfoWindow(`酒店:${hname}`, opts);
      // 点标记添加点击事件
      marker.addEventListener('click', function () {
          this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
      });
      //创建文本标注
      var content = `${hname}`;
      var label = new BMapGL.Label(content, {       // 创建文本标注
        position: point,
        offset: new BMapGL.Size(0, -50)
      })  
      this.map.addOverlay(label);                        // 将标注添加到地图中
      label.setStyle({                              // 设置label的样式
        color: '#fff',
        fontSize: '14px',
        backgroundColor:'#e38',
        padding:'5px'
      })
    },
  },  
  mounted() {
    var geolocation = window.navigator.geolocation;
    geolocation.getCurrentPosition((result)=>{
      // console.log(result)
    })
    // console.log("加载了map组件")
    this.myMap();
  },
  watch:{
    longitude(){
      this.myMap()
    }
  }
};
</script>

<style>
#bdMap {
 width: 265px;
 height: 265px
}
</style>